<!DOCTYPE html>
<html lang="zh">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header :: header(~{::title},~{::link},~{})">
    <title>临窗旋墨-文章列表</title>
    <link rel="stylesheet" th:href="@{/css/jianshu.css}" />
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body class="body">
<!--导航-->
<div th:replace="common/nav :: nav(true)"></div>
<div class="container-fluid">
    <div class="row">
        <div style="margin-top: 20px;"></div>
        <div class="col-lg-2  col-sm-2 col-md-2">
            <!-- 分类列表 -->
            <div class="panel panel-success category" th:if="${categories}">
                <div class="panel-body">
                    <div class="widget">
                        <ul class="category-list">
                            <li  th:classappend="${null == pager.lookup.categoryId} ? 'active' : ''" data-id="" >
                                <a class="" href="javascript:;" >全部分类</a>
                            </li>
                            <li th:each="category: ${categories}" th:classappend="${category.id == pager.lookup.categoryId} ? 'active' : ''" th:attr="data-id=${category.id}">
                                <a class="" href="javascript:;"  th:text= "${category.name}">Javascript</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 分类列表end -->



            <!-- 专题列表 -->
            <div class="panel panel-success topic" th:if="${topics}">
                <div class="panel-body">
                    <div class="widget">
                        <ul class="category-list">
                            <!--/*@thymesVar id="topicId" type=""*/-->
                            <li  th:classappend="${null == pager.lookup.topicId} ? 'active' : ''" data-id="" >
                                <a class="" href="javascript:;" >全部专题</a>
                            </li>
                            <li th:each="topic: ${topics}" th:classappend="${topic.id == pager.lookup.topicId} ? 'active' : ''" th:attr="data-id=${topic.id}" >
                                <a class="" href="javascript:;"  th:text= "${topic.name}">Javascript</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-7  col-sm-7 col-md-7">

            <form class="form-inline tag" role="form">
                <!--遍历出标签-->
                <!--/*@thymesVar id="tags" type=""*/-->
                <button type="button" class="btn btn-xs"  data-id=""
                        th:classappend="${#strings.isEmpty(pager.lookup.tagIds)} ? 'btn-primary' : 'btn-link'" >全部</button>
                <div th:remove="tag" th:each="tag:${tags}">
                    <button type="button" class="btn btn-xs"  th:text="${tag.name}"
                            th:classappend="${tag.id+'' == pager.lookup.tagIds} ? 'btn-primary' : 'btn-link'"
                            th:attr="data-id=${tag.id}"></button>
                </div>
            </form>
            <div style="margin-top: 20px;"></div>
            <!--文章列表-->
            <div th:replace="common/articles :: articles"></div>
            <!--页码相关-->
            <div th:replace="common/pager :: pager"></div>
                <!-- 把分类id  专题id 以及标签id 作为查询条件存在这里-->
            <div class="hide-lookup hidden">
                <input type="hidden" name="categoryId"  th:value="${pager.lookup.categoryId}" /><br>
                <input type="hidden" name="topicId" th:value="${pager.lookup.topicId}"/><br>
                <input type="hidden" name="tagIds" th:value="${pager.lookup.tagIds}" /><br>
            </div>
        </div>

        <div class="col-lg-3  col-sm-3 col-md-3 ">
            <!--分类的介绍-->
            <!--/*@thymesVar id="category" type=""*/-->
            <div class="panel panel-warning" th:if="${category}">
                <div class="panel-heading">
                    <!--/*@thymesVar id="name" type="String"*/-->
                    <h3 class="panel-title" th:text="${category.name}">springBoot</h3>
                </div>
                <!--/*@thymesVar id="introduceroduce" type="pers.vic.blog.module.api.model.BlogCategory"*/-->
                <div class="panel-body" th:utext="${category.introduce}">
                    springb的一些介绍
                </div>
            </div>

            <!--某个专题的介绍-->
            <!--/*@thymesVar id="topic" type=""*/-->
            <div class="panel panel-warning" th:if="${topic}">
                <div class="panel-heading">
                    <h3 class="panel-title" th:utext="${topic.name + '<em>专题介绍</em>'}">springBoot</h3>
                </div>
                <div class="panel-body" th:utext="${topic.introduce}">
                    springb的一些介绍
                </div>
            </div>

        </div>
    </div>
</div>
<!-- 引入通用js-->
<div th:replace="common/footer :: footer"></div>
<script>
    $(function(){
        $nojs.before(function(context){
            this; //表示nojs全局对象，等同于$nojs.
            this.pagination.enable=false;
        });
        // 初始化页码
        $("form ul.pagination").pager({"lookup":"div.hide-lookup"});

        //点击分类
        $("div.category ul li").on("click", function(){
            submit("categoryId", $(this).data("id"));
        });
        //点击专题
        $("div.topic ul li").on("click", function(){
            submit("topicId", $(this).data("id"));
        });
        //点击标签
        $("form.tag button").on("click", function(){
            submit("tagIds", $(this).data("id"));
        });

        /**
         * 以post方式提交当前页面
         * @param name
         * @param value
         */
        function submit(name, value){
            var  $form = $('<form method="post"></form>').appendTo($("body"));
            //把隐藏的查询条件复制过来
            var $lookup = $("div.hide-lookup :input").clone();
            //替换当前传过来的name对应的input的值
            $lookup.filter('[name="'+name+'"]').val(value);
            $form.append($lookup);
            $form.submit();
            $(".help:hidden", $form).remove();
        }
    });

</script>
</body>
</html>
